const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    mode:'development',
    devtool:'source-map',
    entry:{
        main:'./src/index.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].[chunkhash:6].js'
    },
    module:{
      rules:[
        {
            test:/\.js$/,
            use:['babel-loader']
        },
        {
            test:/\.css$/,
            // use:['style-loader','css-loader']
            use:[ MiniCssExtractPlugin.loader ,'css-loader']
        },
        {
            test:/\.less$/,
            // use:['style-loader','css-loader','less-loader']
            use:[ MiniCssExtractPlugin.loader ,'css-loader','less-loader']
        },
        {
            test:/\.(png|jpg|jpeg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{
                    limit: 0.5 * 1024,
                    name: '[name].[ext]',
                    outputPath:'img2',   
                    publicPath:'/img2',
                }
            }]
        }
      ]
    },

    plugins:[
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
           filename:'css/[name].[contenthash:6].css'
        })
    ]
}